import React from "react";
import { connect } from "dva";
import { Form, Tabs, message, Modal } from "antd";

import Video from "./Video";
import Right from "./Right";
import Footer from "./Footer";
import Header from "./Header";
import Left from "./Left";
import Article from "./Article";
import Images from "./Images";
import Banner from "./Banner";
import RightTwo from "./RightTwo";
import RightBanner from "./RightBanner";
import { UrlConfig, getConfig } from "../../../services/fetch";

import "./Add.scss";
import DraftHistory from "./DraftHistory";
const TabPane = Tabs.TabPane;
const { confirm } = Modal;
@connect(({ add }) => ({
  add: add
}))
@Form.create()
export default class AddVideo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      articleShow: true,
      imgShow: false,
      bannerShow: false,
      activeKey: "1"
    };
    this.getRightValue = this.getRightValue.bind(this);
    this.getLeftValue = this.getLeftValue.bind(this);
    this.resetFields = this.resetFields.bind(this);
    window.PubSub.subscribe("editor", this.setEditor);
    // window.PubSub.subscribe('editor', this.initUpload);//解决mch加载之后，上传组件会报错
    window.PubSub.subscribe("setFileFabu", this.setFieldfabu);

    this.Footer = React.createRef();
  }
  componentDidMount() {
    let sc = document.createElement("script");
    sc.src = `${UrlConfig}/application/fcpublic/resource/js/fc-upload.js`;
    document.querySelector("body").appendChild(sc);

    let token = localStorage.getItem("token");
    let site_id = localStorage.getItem("site_id");
    // 获取权限信息
    this.props.dispatch({
      type: "video/getQuanxian",
      payload: {
        data: {
          token: token ? token : "D3F3C235A8884AC96D5133D810B11CF5",
          site_id: site_id ? site_id : "00000000000000000000000000000000"
        }
      }
    });
    //保存url参数
    this.props.dispatch({
      type: "theme/setParams",
      data: this.props.match.params
    });

    //获取版面样式
    /**
     * 1  列表
     * 2  banner
     * 3  快讯
     * 4  服务
     */
    if (
      this.props.match.params.class != "theme_edit" &&
      this.props.match.params.class != "theme"
    ) {
      //专题是没有版面的
      let _that = this;
      this.props.dispatch({
        type: "add/getBanMian",
        callback: data => {
          if (data) {
            //获取当前新建的版面样式   根据样式id默认选择版面样式
            let treeSelectId = localStorage.getItem("treeSelectedValue");
            data.map((item, index) => {
              if (item.children && item.children.length > 0) {
                item.children.map((i, num) => {
                  if (i.plate_id == treeSelectId) {
                    /**
                     * @Author: 戴文锋 daiwenfeng@sobey.com
                     * @msg: 注释banner
                     */
                    // if (i.template_id == 2) {
                    //     _that.setState({
                    //         activeKey: '3'
                    //     })
                    //     _that.props.dispatch({ type: 'add/setActiveKey', data: '3' })
                    // }
                    let data = {
                      plate_id: treeSelectId
                    };
                    this.child.setBanMianFields(data);
                  }
                });
              }
            });
          }

          //获取详情数据
          if (this.props.match.params.video_id) {
            this.props.dispatch({
              type: "add/edit",
              data: this.props.match.params.video_id,
              callback: data => {
                let id = data.type;
                this.setState({
                  activeKey: String(id)
                });
                this.props.dispatch({
                  type: "add/setActiveKey",
                  data: String(id)
                });
                this.setFields(data);
                this.props.dispatch({
                  type: "add/getInfoHistory",
                  payload: {
                    information_id: this.props.match.params.video_id
                  }
                });
              }
            });
          }
        }
      });
    } else {
      //专题编辑获取详情数据
      if (this.props.match.params.class == "theme_edit") {
        this.props.dispatch({
          type: "add/editGetThemeDetail",
          data: this.props.match.params.theme_id,
          callback: data => {
            let id = data.type;
            this.setState({
              activeKey: String(id)
            });
            this.props.dispatch({ type: "add/setActiveKey", data: String(id) });
            this.setFields(data);
          }
        });
      }
    }

    // 获取资讯分类
    this.props.dispatch({
      type: "add/classList"
    });
  }

  componentDidUpdate(prevProps, prevState) {
    // console.log("更新了。。。", prevProps.currentInfoDraft);//this.props和prevProps是一样的
    // console.log("更新了。。。", this.props.add.currentInfoDraft);//this.props和prevProps是一样的
    // if(window.UE && this.props.add.testContent){
    //     this.setEdiotrContent(this.props.add.testContent);
    // }
  }

  //获取表单值
  onRef = ref => {
    this.child = ref;
  };

  onFooterRef = ref => {
    this.Footer = ref;
  };

  //获取表单值
  onRef2 = ref => {
    this.child2 = ref;
  };

  //右边form
  getRightValue = () => {
    let rightData = this.child.getFieldsValue();
    if (rightData) {
      return rightData;
    }
  };
  //左边form
  getLeftValue = () => {
    let leftData = this.child2.getFieldsValue();
    // console.log(leftData)
    if (leftData) {
      return leftData;
    }
  };
  //获取所有值
  getFileds = () => {
    let left = this.child2.getFieldsValueTab();
    let right = this.child.getFieldsValueTab();
    let allForm = {};
    Object.assign(allForm, left, right);
    return allForm;
  };
  //订阅
  setEditor = data => {
    this.child2.setEditor(data);
    this.child.setEditor(data);
  };
  //重置
  resetFields = () => {
    this.child.resetFields();
    this.child2.resetFields();
  };
  //设置值
  setFields = data => {
    switch (data.type) {
      case 1:
        this.setState({
          activeKey: "1"
        });
        break;
      case 2:
        this.setState({
          activeKey: "2"
        });
        break;
      case 3:
        this.setState({
          activeKey: "3"
        });
        break;
      default:
        break;
    }
    console.log(data, "22222222");
    setTimeout(() => {
      if (this.child.setFields) {
        this.child.setFields(data);
      }
      if (this.child2.setFields) {
        this.child2.setFields(data);
      }
    }, 0);
  };
  // 已发布设置值
  setFieldfabu = data => {
    //判断类型，1 文章，2图集，3banner
    if (data.type === Number(this.state.activeKey) && !data.module_name) {
      if (this.child.setFields) {
        this.child.setFields(data);
        this.child.setState({
          forwardNumPro: data.forwardNum,
          thumbsNumPro: data.thumbsNum,
          scanNumPro: data.scanNum
        });
      }
      if (this.child2.setFields) {
        this.child2.setFields(data);
      }
    } else {
      message.warning("文章类型不正确");
    }
  };

  /**
   * 确认框
   */
  showConfirm = (callback = () => {}) => {
    confirm({
      title: "新建时，如果切换稿件类型数据会自动保存，确定要切换吗?",
      onOk: () => {
        this.Footer.submitForm(res => {
          if (res) {
            callback();
          } else {
            message.error("数据不合法");
          }
        });
      },
      onCancel: () => {
        // console.log('Cancel');
      }
    });
  };

  /**
   * 改变pane
   */
  changePane = activeKey => {
    if (activeKey === "1") {
      this.props.dispatch({ type: "add/saveMchType", data: "editor" });
    } else {
      this.props.dispatch({ type: "add/saveMchType", data: null });
    }

    if (this.props.add.informationInfo.type) {
      let id = this.props.add.informationInfo.type;
      this.setState({
        activeKey: String(id)
      });
      this.props.dispatch({ type: "add/setActiveKey", data: String(id) });
      message.warning("编辑不可修改数据类型");
    } else {
      console.log(activeKey);

      this.setState({
        activeKey: activeKey
      });
      this.props.dispatch({ type: "add/setActiveKey", data: activeKey });

      // this.showConfirm(() => {

      // });
    }
  };
  render() {
    const { informationInfo } = this.props.add;

    return (
      <div className="AddInfo" id="AddMW">
        {/* {informationInfo.type ? (
          ""
        ) : (
          <Header
            reset={this.resetFields}
            setFields={this.setFields}
            getFileds={this.getFileds}
          />
        )} */}
        <div className="content">

          <div className="c-mid">
            <Tabs
              className="c-mid-tab"
              activeKey={this.state.activeKey}
              onChange={this.changePane}
              tabPosition="left"
              // tabBarStyle={{ writingMode: "vertical-lr" }}
            >
              <TabPane
                tab={<h2 style={{ writingMode: "vertical-lr" }}> ᠵᠣᠬᠢᠶᠠᠯ</h2>}
                key="1"
              >
                <Article
                  className={this.state.activeKey === "1" ? "display" : ""}
                  onRef={this.onRef2}
                  match={this.props.match}
                />
              </TabPane>
              {/* <TabPane tab={<h2 style={{ writingMode: "vertical-lr" }}> ᠵᠢᠷᠤᠭ ᠤ᠋ᠨ ᠲᠡᠭᠦᠪᠦᠷᠢ</h2>}  key="2">
                {this.state.activeKey === "2" ? (
                  <Images onRef={this.onRef2} />
                ) : null}
              </TabPane> */}
              {/**
               * @Author: 戴文锋 daiwenfeng@sobey.com
               * @msg: 注释banner
               */
              /* {this.props.match.params.class != 'theme_edit' && this.props.match.params.class != 'theme' ? //专题里面不能新建banner类型的资讯
                                <TabPane tab="Banner" key="3">
                                    {this.state.activeKey === '3' ? <Banner onRef={this.onRef2} /> : null}
                                </TabPane> : ''} */}
              {/* <TabPane tab="文本" key="4">Content of Tab Pane 3</TabPane> */}
            </Tabs>
          </div>
          <div className="c-right">
            <RightTwo type={this.props.match.params.type} onRef={this.onRef} />
          </div>
        </div>
        <div className="footer">
          <Footer
            getLeft={this.getLeftValue}
            getRight={this.getRightValue}
            reset={this.resetFields}
            type={this.props.match.params.type}
            id={this.props.match.params.video_id}
            class={this.props.match.params.class}
            themeId={this.props.match.params.theme_id}
            onRef={this.onFooterRef}
          />
        </div>
        <div id="fcUpload"></div>
        <div id="fcUploadvideo"></div>
        <div id="fcUploadaudio"></div>
        <div id="fcUploadimg"></div>
      </div>
    );
  }
}
